<template>
  <div class="container">
    <div class="camera-frame" style="width: 450px; height: 450px;">
      <video ref="video" :style="{ transform: `scaleX(-1) scale(${zoomLevel})` }" autoplay></video>
      <img src="@/assets/images/glossoscopy_bg.png" class="overlay-image" alt="Overlay" />
    </div>
    <div class="controls">
      <div>
        <label style="color: #d3dce6">镜头缩放:</label>
        <input type="range" v-model="zoomLevel" min="1.6" max="3" step="0.1" />
      </div>
      <button @click="capture">拍照</button>
      <button v-if="image" @click="resetCapture">重新拍照</button> <!-- 重新拍照按钮 -->
    </div>
    <canvas ref="canvas" style="display: none;"></canvas>
    <img v-if="image" :src="image" alt="Captured Image" />
  </div>
</template>

<script>
import axios from 'axios';
import {glossoscopy} from '@/api/health/healthReport'
export default {
  data() {
    return {
      image: null,
      zoomLevel: 1.6, // 默认缩放级别
    };
  },
  mounted() {
    this.startCamera();
  },
  methods: {
    startCamera() {
      navigator.mediaDevices.getUserMedia({ video: true })
        .then((stream) => {
          this.$refs.video.srcObject = stream;
        })
        .catch((error) => {
          console.error('Error accessing the camera: ', error);
        });
    },
    capture() {
      const canvas = this.$refs.canvas;
      const context = canvas.getContext('2d');
      const video = this.$refs.video;

      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      context.drawImage(video, 0, 0);

      // 获取 Base64 数据
      this.image = canvas.toDataURL('image/png');

      // 上传图片
      this.uploadImage(this.image);
    },
    resetCapture() {
      this.image = null; // 清空之前拍摄的图片
    },
    uploadImage(base64Image) {
      glossoscopy({imgBase64:base64Image}).then(res=>{
        console.log('处理成功:', response.data);
      })
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  height: 100vh; /* 使容器填满整个视口高度 */
  background-color: #0f0f47; /* 设置背景颜色为蓝色 */
}

.camera-frame {
  border-radius: 50%; /* 圆形效果 */
  overflow: hidden; /* 隐藏超出部分 */
  position: relative; /* 相对定位 */
  display: flex;
  justify-content: center;
  align-items: center;
}

video {
  width: 100%;
  height: auto;
  transition: transform 0.2s; /* 添加过渡效果 */
}

.overlay-image {
  position: absolute; /* 绝对定位 */
  top: 0; /* 距离顶部 0 */
  left: 0; /* 距离左侧 0 */
  width: 100%; /* 宽度 100% */
  height: 100%; /* 高度 100% */
  object-fit: cover; /* 保持图片比例，覆盖整个区域 */
  opacity: 0.5; /* 设置透明度 */
}

.controls {
  margin-top: 20px; /* 控制面板与取景框之间的间距 */
}


</style>
